<!--
 * @Description:
 * @Author: lz
 * @Date: 2022-12-28 20:33:30
 * @LastEditTime: 2022-12-30 21:36:17
 * @LastEditors: lz
-->
<template>
  <div class="process-container">
    <div class="tab pa-flex-center">
      <div
        :class="currentIndex == index ? 'checked' : ''"
        v-for="(item, index) in tabs"
        :key="index"
        @click="handleTab(index)"
      >{{ item }}</div>
    </div>
    <div v-if="detailId && currentIndex === 0" class="table">
      <PaTable :detailId="detailId"></PaTable>
    </div>
    <ConfigItem
      :projectId="detailId"
      @updateStage="updateStage"
      :processId="processId"
      :stage="stage"
      v-else
    ></ConfigItem>
  </div>
</template>
<script>
import { getOnlinePage, getProcessApi } from '@/api/processApi.js'
import PaTable from '@/components/PaTable'
import ConfigItem from '@/components/ConfigItem'
export default {
  components: {
    PaTable,
    ConfigItem
  },
  data () {
    return {
      currentIndex: 0,
      detailId: '',
      tabs: ['项目信息', '流程配置'],
      form: {
        projectName: ''
      },
      list: 5,
      paginationConfig: {
        total: 0,
        pageNo: 1,
        pageSize: 10
      },
      stage: 1,
      processId: ''
    }
  },
  created () {
    this.detailId = this.$route.query.id
    this.stage = Number(this.$route.query.stage)
    this.tab = this.$route.query.type == 2 ? 1 : 0;
    this.currentIndex = this.tab
  },
  mounted () {
    this.getProcess()
  },
  methods: {
    updateStage (stage) {
      this.stage = stage
      this.getProcess()
    },
    handleTab (index) {
      this.currentIndex = index
    },
    getProcess () {
      getProcessApi({
        projectId: this.detailId,
        templateId: '7042674315798149339',
        stage: this.stage
      }).then(res => {
        // if (res.code == 0) {
        //   this.processId = res.data.id
        // }
      })
    },
    getData () {
      getOnlinePage({
        projectName: this.form.projectName.trim(),
        pageNo: this.paginationConfig.pageNo,
        pageSize: this.paginationConfig.pageSize,
        windowId: JSON.parse(localStorage.getItem('P-User-Info')).id - 0
      }).then(res => {
        this.paginationConfig.total = res.data.total
        this.list = res.data.records
      })
    },
    changeCurrentPage (pageNum) {
      this.paginationConfig.pageNo = pageNum
      this.getData()
    },
    changeSizePage (pageSize) {
      this.paginationConfig.pageSize = pageSize
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.tab {
  width: 370px;
  height: 62px;
  background: #dfe9ff;
  border-radius: 31px;
  margin-bottom: 20px;
  div {
    width: 164px;
    height: 46px;
    text-align: center;
    line-height: 46px;
    cursor: pointer;
  }
  .checked {
    background: #3d78ff;
    border-radius: 23px;
    color: #fff;
  }
}
.table {
  background: #ffffff;
  box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
  border-radius: 24px;
  padding: 39px 53px;
  //   height: 400px;
  //   overflow: hidden;
  //   overflow-y: scroll;
}
</style>
